<template>
	<view>
		<view class="headinfo">
			<!-- 删除 -->
			<u-icon name="trash" color="#2979ff" style="position: absolute;" class="delete"></u-icon>
			<!-- 编辑 -->
			<u-icon name="edit-pen" color="#2979ff" style="position: absolute;" class="edit"></u-icon>
			<!-- 下载 -->
			<u-icon name="download" color="#2979ff" style="position: absolute;" class="download"></u-icon>
			<!-- 分享 -->
			<button type="primary" open-type="share" style="position: absolute;" class="share">
				<u-icon name="share" color="#2979ff" @click="shareto"></u-icon>
			</button>
			
			<view class="headimage">
				<image src="../../../static/uview/common/位图.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="namebox">
				郝桂英
			</view>
		</view>
		<view class="tab">
			<view class="li" @click="scrollto('decoraion')">
				简介
			</view>
			<view class="li" @click="scrollto('phonetos')">
				相册
			</view>
			<view class="li" @click="scrollto('videos')">
				视频
			</view>
		</view>
		<view class="outbox">
			<view class="decoraion" id="decoraion">
				<view class="title">
					简介
				</view>
				自去年母亲被诊断为肺纤维化病变的疾病以来
				，先后入院治疗三次，最近一次于10月7日入院治疗，
				终因病情急剧恶化，医治无效，于10月11日12时25分，与世长辞，享年75岁。
				
				母亲是个平凡的妇女，于1941年9月出生于上杭城关一个普通的码头工人家庭，
				因一些特殊原因，出生不久就送给同城的另一家做养女，自小就担负起家里的一些事务，
				10岁开始随养母回祖籍永定老家务农，20岁招工进入上杭县医院做炊事员。
				之后随夫先后在上杭庐丰、才溪、白砂、旧县等卫生院担负炊事员、收费员工作，
				1981年10月调回上杭县医院工作直至1993年退休。
				<view class="title">
					追悼词
				</view>
				青山无语是大家在为你的离去而伤怀，九天寒彻是苍天在为你的去世而动容。今天，我们怀着沉痛的心情悼念**老人。请允许我代表今天参加追悼会的各位亲朋好友和各位来宾，向不幸驾鹤仙逝的老人及老人的亲属，表示沉痛的哀悼！
				<view class="title">
					事迹
				</view><span>
				母亲对子女教育非常重视，从小谆谆教诲我们做人要诚实、正直、善良。也许是一直苦恼自己文化水平低的缘故，对子女的学习一向监督严厉，再忙都会经常关心了解孩子们学习的情况。自己还以身作则，在子女做功课时，也手捧书本认真补习文化知识，也许正是母亲潜移默化的影响，子女学习都非常自觉，成绩也很优秀。三个孩子先后从农村考入上杭一中读书。
				</span>
				<span>母亲有一副善良热心的心肠，总是热心接济身边一些有困难的人，经常一双巧手编织了许多小孩子的鞋帽、衣服送给左邻右舍和亲朋好友。如他们家庭遇到一些灾难及重大疾病以及孩子升学的困难时都会解囊相助，不图任何回报。母亲付出很多却又受不得别人的恩慧，有困难几乎都不向别人求助，默默撑着度过难关。就是生病也是如此，今年病情一天比一天重，二次入院治疗她都不让我们告诉别人，期间有一些亲朋好友获知消息要来探望她也都婉拒了。就在去世前两天，在**工作的二女儿打来电话告诉要回来照顾母亲，母亲怕耽误她的工作，还瞒着自已严重的病情，很执着地拒绝了，以至二女儿都没来得及看上母亲最后一眼。母亲啊，这是儿女心中的一大遗憾。
			</span></view>
			<view class="phonetos" id="phonetos">
				<view class="title">
					相册
				</view>
				<view>
					<image src="../../../static/uview/common/人文故事1.png" mode="widthFix" style="width: 30%;margin:1.5%"></image>
					<image src="../../../static/uview/common/人文故事1.png" mode="widthFix" style="width: 30%;margin:1.5%"></image>
					<image src="../../../static/uview/common/人文故事1.png" mode="widthFix" style="width: 30%;margin:1.5%"></image>
					<image src="../../../static/uview/common/人文故事1.png" mode="widthFix" style="width: 30%;margin:1.5%"></image>
					<image src="../../../static/uview/common/人文故事1.png" mode="widthFix" style="width: 30%;margin:1.5%"></image>
					<image src="../../../static/uview/common/人文故事1.png" mode="widthFix" style="width: 30%;margin:1.5%"></image>
					<image src="../../../static/uview/common/人文故事1.png" mode="widthFix" style="width: 30%;margin:1.5%"></image>
				</view>
			</view>
			<view class="decoraion" id="videos">
				<view class="title">
					视频
				</view>
				<view class="videc">
					<video style="width: 100%;" src="https://vd3.bdstatic.com/mda-mf825kxd6uq0eqk4/fhd/cae_h264_nowatermark/1623202510458902408/mda-mf825kxd6uq0eqk4.mp4?v_from_s=sz_haokan_4469&auth_key=1623665980-0-0-278098895d18d1e8b51c00c634becaf5&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=" controls></video>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		// onLoad() {
		// 	this.$u.mpShare.title = '天苍苍野茫茫，风吹草低见牛羊';
		// },
		// 这里如果写成onShareAppMessage: res => { ... }形式的箭头函数，在内部会无法获得this
		// onShareAppMessage(res) {
		// 	if (res.from === 'button') {// 来自页面内分享按钮
		// 		console.log(res.target)
		// 	}
		// 	return {
		// 		title: '自定义分享标题',
		// 		path: '/pages/test/test?id=123'
		// 	}
		// },
		// 分享拦截
		// onShareTimeline(res) {
		// 		if (res.from === 'button') {// 来自页面内分享按钮
		// 			console.log(res.target)
		// 		}
		// 		return {
		// 			title: '自定义分享标题',
		// 			path: '/pages/test/test?id=123'
		// 		}
		// },
		methods: {
			shareto(){
				console.log('我要分享')
				this.$u.mpShare = {
					title: '我要分享', // 默认为小程序名称，可自定义
					path: 'https://www.baidu.com', // 默认为当前页面路径，一般无需修改，QQ小程序不支持
					// 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
					// 支持PNG及JPG，默认为当前页面的截图
					imageUrl: '' 
				}
			},
			scrollto(ind){
				const query = uni.createSelectorQuery().in(this);
				query.select('#'+ind).boundingClientRect(data => {
				  console.log("得到布局位置信息" + JSON.stringify(data));
				  console.log("节点离页面顶部的距离为" + data.top);
					uni.pageScrollTo({
					    scrollTop: data.top,
					    duration: 300
					})
				}).exec();
			}
		},
		mounted() {
			
		}
	}
</script>

<style scoped lang="less">
	.headinfo{
		width: 100%;
		heigt:310upx;
		background-color: rgba(127, 77, 18, 0.89);
		text-align: center;
		padding:20upx;
		position: relative;
	}
	.headimage{
		width:200upx;
		height: 200upx;
		border-radius: 50%;
		overflow: hidden;
		display: inline-block;
		margin-top: 20upx auto;
		text-align: center;
	}
	.namebox{
		text-align: center;
		font-size: 38upx;
		font-weight: bold;
	}
	.title{
		position: relative;
		padding-left: 20upx;
		font-weight: bold;
		margin: 30upx 0;
	}
	.title::before{
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 12upx;
		height: 12upx;
		border-radius: 50%;
		background-color: #FF9900;
	}
	.tab{
		overflow: hidden;
		.li{
			float: left;
			width: 33.2%;
			border-right: 1upx solid rgb(230,230,230);
			text-align: center;
			height: 60upx;
			line-height: 60upx;
			color:#777;
			font-size: 32upx;
			font-weight: bold;
			background-color: rgba(249, 205, 144, 0.26);
		}
		.li:last-child{
			border-right:none;
		}
	}
	.videc{
		padding: 50upx;
	}
	.outbox{
		padding: 30upx;
	}
	.share{
		bottom: 20upx;
		right: 20upx;
		font-size: 40upx;
		background-color:transparent;
		border: none;
		padding: 0;
		line-height: 1em;
	}
	.share::after{
		border: none;
	}
	.delete{
		left: 20upx;
		top: 20upx;
		font-size: 40upx;
	}
	.download{
		left: 20upx;
		bottom: 20upx;
		font-size: 40upx;
	}
	.edit{
		right: 20upx;
		top: 20upx;
		font-size: 40upx;
	}
</style>
